<template>
	<view class="all">
		<view class="carp">
			<text class="carp_1 logo1">注册账号</text>
			<text class="carp_2">Sign up</text>
			<view style="margin-top: 50rpx;">
				<view class="imput">
					<image class='logo2' src="@/static/img/sjp.png" />
					<view style="width: 90%;">
						<u-input type="text" v-model="from.mobile" placeholder="请输入您的手机号" />
					</view>
				</view>

				<view class="imput">
					<image class='logo3' style="width: 38rpx;" src="@/static/img/wjmm.png" />
					<view style="width: 56%;">
						<u-input type="text" v-model="from.code" placeholder="请输入验证码" />
					</view>
					<text class="hqy" @click="submit('获取验证码')">
						<text v-if="!cl">{{number+'s'}}</text>
						获取验证码</text>
				</view>
			</view>
			<text class="denglu" @click="submit('注册账号')">下一步</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				number: 60,
				cl: true,
				from: {
					mobile: "",
					code: '',
					event: "register",

				}
			};
		},
		methods: {
			countdown() {
				if (this.number == 0) {
					this.cl = true
					return false;
				} else {
					this.number--;
				}
				setTimeout(() => {
					this.countdown();
				}, 1000);
			},

			submit(a) {
				if (a == '注册账号') {
					if (!this.from.mobile) {
						this.$toast('请输入手机号', 0)
					} else if (!this.from.code) {
						this.$toast('请输入验证码', 0)
					} else {
						this.$api('user/mobilelogin', this.from).then(res => {
							if (res.code == 1) {
								this.$toast(res.msg, 1)
								setTimeout(() => {
									uni.navigateTo({
										url: `./szmm?mobile=${this.from.mobile}`
									})
								}, 1000)
							} else {
								this.$toast(res.msg, 0)
							}
						})
					}

				} else {
					if (this.cl) {
						this.$api('sms/send', this.from).then(res => {
							if (res.code == 1) {
								if (this.number == 0) {
									this.number = 60
								}
								this.$toast(res.msg, 1),
									this.cl = false
								this.countdown()
							} else {
								this.$toast(res.msg, 0)
							}
						})
					} else {
						this.$toast(this.number + 's后点击', 0)
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.carp {
		width: 75%;
		margin: auto;

		.hqy {
			border-left: 1rpx solid #E3E3E3;
			;
			padding-left: 20rpx;
			display: block;
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #131314;
			opacity: 1;

		}

		.qita {
			margin-top: 150rpx;

			.qita_1 {
				text-align: center;
				margin-top: 40rpx;

				image {
					width: 60rpx;
					height: 50rpx;
				}
			}
		}

		.my {
			text-align: center;
			padding-top: 20rpx;

			text:nth-of-type(1) {
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #131314;
				opacity: 1;
			}

			text:nth-of-type(2) {
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFD500;
				opacity: 1;

			}
		}

		.denglu {
			margin-top: 180rpx;
			display: block;
			width: 562rpx;
			height: 88rpx;
			background: #131314;
			opacity: 1;
			border-radius: 4rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			text-align: center;
			line-height: 88rpx;
			font-weight: 400;
			color: #FFFFFF;
			opacity: 1;
		}

		.wangji {
			text-align: right;
			display: block;
			padding-top: 20rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #91969A;
			opacity: 1;
		}

		.imput {
			border-bottom: 1rpx solid #E3E3E3;
			padding: 40rpx 0 10rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {
				width: 30rpx;
				height: 44rpx;
			}
		}

		.carp_2 {
			font-size: 30rpx;
			display: inline-block;
			margin-top: 10rpx;
			font-family: HarmonyOS Sans;
			font-weight: 400;
			color: #91969A;
			opacity: 1;
		}

		.carp_1 {
			margin-top: 40rpx;
			display: block;
			font-size: 36rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #131314;
			opacity: 1;

		}

		.logo1 {
			margin-top: 200rpx;
		}
	}
</style>
